<template>
  <div class="lun">
    <img :src="this.adv.imgsrc" >
    <h4>{{this.adv.dec}}</h4>
    <p class="price">{{this.adv.price}}</p>
    <p><button >-</button>{{num}} <button >+</button> </p>
    <button class="t1">立即购买</button><button class="t1" @click="add()">加入购物车</button>
  </div>
</template>

<script>
import {cartadd} from '@/api/test.js'
 import {showDescs} from '@/api/test.js'
export default {
   data(){
    return{
        num:1,
        id:this.$route.params.aid,
        adv:{},
    }
   },
   methods:{
//     jian(){
// this.num--
// if(this.num===0){
//     this.num=0
// }
//     },
//     jia(){
//         this.num++
//     },
    getAdv(){
        showDescs(this.id).then(res=>{
            this.adv=res.data
            console.log(res);
        },err=>{
            console.log(err)
        })
    },
add(){
    console.log(process.env.VUE_APP_BASE_API);
//       "pid": "12345",
//   "ppic": "/images/product1.jpg",
//   "pname": "Example Product",
//   "ppice": 19.99,
//   "pnum": 3,
//   "pamount": 59.97,
//   "userid": "u123"
if(this.$cookie.get('user')===null){
        this.$message({
                        message: '请先登录',
                        type: 'warning'
                    });
}else{
        let data={
        pid:this.adv.id,
        ppic:this.adv.imgsrc,
        pname:"暂无",
        ppice:this.adv.price,
        pnum:this.num,
        userid:this.$cookie.get('user')
    }
   
    cartadd(data).then(res=>{
        console.log(res);
         console.log(data);
        console.log(this.adv.price);
            this.$message({
                        message: `${data.ppice}`,
                        type: 'warning'
                    });
    })
    
}
}
   },
   mounted(){
    this.getAdv()
   }

}
</script>

<style scoped>
*{
    margin: 0px auto;
    padding: 0px auto;
}
.lun{
    margin-top: 150px; ;
    position: relative;
    width: 700px;
    height: 800px;
}

img{
    float: left;
    width: 315px;
    height: 423px;
    border-radius: 20px;
    margin-right: 20px;
}

.t1{

   border: rgb(255, 83, 0);
   background: rgb(255, 83, 0);
    width: 100px;
    height: 50px;
  margin-right: 10px; ;
    margin-top: 320px;
    color: aliceblue;
}
p{
    position: absolute;
    top: 290px;
    left: 420px;
}
.t1:hover{
    background: rgb(236, 85, 9);
}
h4{
    position: absolute;
left: 320px;
top:150px;
}
.price{
        position: absolute;
top: 200px;
left: 320px;
color: red;
font-size: 30px;
}

</style>